<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>QQ会员导航</title>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            .box1{
                width: 100%;
                background: rgba(0,0,0,0.5);
                
            }
            
            
            img{
                width: 120px;
                vertical-align: middle;
                
            }
            ul{
                width: 960px;
                margin: 0px auto;
                
                
            }
            li{
                display: inline-block;
                font-size: 12px;
                color: white;
                vertical-align: middle;
                
            }
            ul li:nth-of-type(2){
                margin-left: 72px;
            }
            li:nth-of-type(n+3):nth-of-type(-n+8){
                margin-left: 20px;
                
            }
            li:nth-of-type(9){
                padding: 6px 24px;
                border: 1px solid #fad65c;
                box-sizing: border-box;
                margin-left: 72px;
                border-radius: 18px;
                color: #fad65c;
            }
            li:nth-of-type(10){
                margin-left: 0px;
                padding: 6px 24px;
                border: 1px solid #fad65c;
                box-sizing: border-box;
                margin-left: 0px;
                border-radius: 18px;
                color: #fad65c;
            }
            li:nth-of-type(n+2):nth-of-type(-n+8) a:link{
                color: white;
                text-decoration: none;
            }
            li:nth-of-type(n+2):nth-of-type(-n+8) a:hover{
                color: #0000ff;
            }
/*
            li:nth-of-type(9):nth-of-type(10) a:link{
                color: #fad65c;
                text-decoration: none;
            }
            li:nth-of-type(9):nth-of-type(10) a:hover{
                color: #986b0d;
                background: #986b0d;
            }
*/
            li:nth-of-type(9):hover{
                background: #fad65c;
            }
            
            
            li:nth-of-type(9):hover a{
                color: #986b0d;
                
            }
            li:nth-of-type(9) a{
                color: #fad65c;
                text-decoration: none;
            }
            li:nth-of-type(9) a:hover{
                color: #986b0d;
            }
            li:nth-of-type(10):hover a{
                color: #986b0d;
                
            }
            li:nth-of-type(10):hover{
                background: #fad65c;
            }
                
            li:nth-of-type(10) a{
                color: #fad65c;
                text-decoration: none;
            }
            li:nth-of-type(10) a:hover{
                color: #986b0d;
            }
        </style>
    </head>
    <body>
        <div class="box1">
                <ul>
                    <li><a href="#"><img src="logo.png" /></a></li>
                    <li><a href="#">功能特权</a></li>
                    <li><a href="#">游戏特权</a></li>
                    <li><a href="#">生活特权</a></li>
                    <li><a href="#">会员活动</a></li>
                    <li><a href="#">成长体系</a></li>
                    <li><a href="#">年费专区</a></li>
                    <li><a href="#">超级会员</a></li>
                    <li><a href="#" class="nine">登录</a></li>
                    <li><a href="#" class="ten">开通超级会员</a></li>
                </ul>
        </div>
    </body>
</html>